<template>
    <view class="">
 			<view class="bar_top"> 
				
				<view class="search_bar">
  
					<picker mode="selector"  :range="productClass" :value="productClassIndex" range-key="name" @change="choiseProductClass">
						<view class="search_bar_picker">
							<view>{{productClass[productClassIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>

					<picker mode="selector" :range="productType" :value="productTypeIndex" range-key="name" @change="choiseProductType">
						<view class="search_bar_picker" style="margin-left:20rpx;">
							<view>{{productType[productTypeIndex].name}}</view>
							<image src="/static/images/bar_down.png"></image>
						</view>
					</picker>

					<view class="search_bar_btn">
						<image :src="type == 1 ? '/static/images/unpie.png' : '/static/images/pie.png'" @tap="selChartType(0)"></image>
						<image :src="type == 0 ? '/static/images/unbar.png' : '/static/images/bar.png'" @tap="selChartType(1)"></image>
					</view>
				</view>
				 
				<view class="statistics_box">
					<canvas canvas-id="chart" id="chart" class="charts" @touchstart="touchChart"></canvas>
				</view>
			</view>
  	</view> 
</template>
<script>
    import uCharts from "../../../js_sdk/u-charts/u-charts/u-charts.js";
    let chart = null;
    export default {
        data(){
			return{
  				barNum:0,
                type:0,
                productClass:[
					{"name": "按产品名称","data": 1},
					{"name": "按产品类别","data": 2},
				],
				productClassIndex:0,
				productType:[
					{"name": "全部","data": 0},
					{"name": "销售产品","data": 1},
					{"name": "赠品","data": 2},
				],
				productTypeIndex:0,
				branch_id:0,   // 部门ID
				cWidth:"",
				cHeight:"",
				series1: [],
				categories: [],
				series2:[
					{"name":"","data": []}
				]
			}
		},
		onLoad() {
			this.cWidth=uni.upx2px(670);
			this.cHeight=uni.upx2px(500);
			this.getChatData();
		},
		methods:{
			selChartType(type){
				if(type != this.type){
					this.type = type;
					this.drawChart();
				}
			},
			// 获取数据
			getChatData(){
 
				this.boxHide = false;
                let upJson = {user_id:uni.getStorageSync("userId")};

                upJson.class = this.productClass[this.productClassIndex].data;
                upJson.product_type = this.productType[this.productTypeIndex].data;
                
                this.series1 = new Array();

				this.$api.getChatList(upJson,3).then(res =>{
					
					this.categories = new Array();
					this.series2[0].data = new Array();

					// 封装柱形图标数据
					for(let i=0;i<res.length;i++){

                        this.series1.push({name:res[i].title,data:res[i].number})
						this.categories.push(res[i].title);
						this.series2[0].data.push(res[i].number);
					}

					this.drawChart();

				})

 			},
			choiseProductClass(e){
				this.productClassIndex = e.detail.value;
				this.getChatData();
			},
			choiseProductType(e){
				this.productTypeIndex = e.detail.value;
				this.getChatData();
			},
			drawChart(){
				let that = this;
				if(this.type == 0){
					chart = new uCharts({
						$this:this,
						canvasId: 'chart',
						type: 'pie',
						fontSize:11,
						legend:{show:true},
						background:'#FFFFFF',
						pixelRatio:1,
						series: this.series1,
						animation: true,
						width: this.cWidth,
						height: this.cHeight,
						dataLabel: true,
						extra: {
							pie: {
							  labelWidth:15
							}
						},
					});
				}else{
					chart = new uCharts({
						$this:this,
						canvasId: 'chart',
						type: 'column',
						legend:{show:false},
						fontSize:11,
						background:'#FFFFFF',
						pixelRatio:1,
						padding:[40,15,4,15],
						animation: true,
						categories: this.categories,
						series: this.series2,
						xAxis: {
							disableGrid:true,
							rotateLabel:true
						},
						yAxis: {
							//disabled:true
						},
						dataLabel: true,
						width: this.cWidth,
						height: this.cHeight,
						extra: {
							column: {
								type:'group',
								width: 20
							}
						  }
					});
				}
			},
			touchChart(e){
				chart.showToolTip(e, {
					format: function (item) {
						return item.name + ':' + item.data 
					}
				});
			}, 
		}
    }
</script>
<style>

</style>